import useCounterModel from "../model/useCounterModel";
import { useEffect } from "react";

export function useCounterModelDouble() {
    const { count, increment, decrement } = useCounterModel();
    return {
        count: count * 2,
        decrement,
        increment
    };
}

export default function HoxApp1() {
    const { count, increment, decrement } = useCounterModel();
    useEffect(() => {
        console.log("HoxApp1 rerender")
    })
    return (
        <div>
            <h2>HoxApp1</h2>
            count: {count}
            <button onClick={increment}>自增</button>
            <button onClick={decrement}>自减</button>
        </div>
    )
}

export function HoxApp2() {
    const { count, increment, decrement } = useCounterModelDouble();
    useEffect(() => {
        console.log("HoxApp2 rerender")
    })
    return (
        <div>
            <h2>HoxApp2</h2>
            count: {count}
            <button onClick={increment}>自增</button>
            <button onClick={decrement}>自减</button>
        </div>
    )
}
// 混合
export function HoxApp3() {
    const { count, increment, decrement } = useCounterModelDouble();
    useEffect(() => {
        console.log("HoxApp2 rerender")
    })
    return (
        <div>
            <h2>HoxApp2</h2>
            count: {count}
            <button onClick={increment}>自增</button>
            <button onClick={decrement}>自减</button>
        </div>
    )
}
